5 svar · 673 visningar · startad av harry_boy
Jag har en dropdown meny som bakgrundsfärgen på texten endast blir så lång som texten är. Inte hela "raden". Det ser fult ut. Är det någon som förstår vad jag menar och samtidigt kanske vet vad jag skall göra? Dvs det är hover funktionen som endast blir på textlängden!
Är det någon som även vet om jag kan sätta en bestämd bredd på "dropdownen"?
sätt ditt a-element som ett block element skulle jag gissa på, men utan HTML och CSS så är det rätt svårt att ge ett vettigt svar.
Kodstycke
<ul id="dropmenu">
<li class="page_item page-item-56"><a title="Order / beställning" href="http://fujitsu/test/?page_id=56">Order / beställning</a>
<ul class="children" style="visibility: hidden; display: block;">
<li class="page_item page-item-92"><a title="Företag" href="http://fujitsu/test/?page_id=92">Företag</a></li>
<li class="page_item page-item-95"><a title="Konsument / privat" href="http://fujitsu/test/?page_id=95">Konsument / privat</a></li>
</ul>
</li>
CSS
#container .header .menu .mmid .list{float:right;margin-top:24px;border-top:solid 1px #e6e6e6;bordeR-left:solid 1px #e6e6e6;}
#container .header .menu .mmid .list ul{list-style:none;margin:0px;padding:0px;}
#container .header .menu .mmid .list ul li{float:left;font:normal 18px 'Trebuchet MS',arial;color:#6d5f5f;padding-left:28px;padding-right:28px;padding-top:10px;padding-bottom:10px;bordeR-right:solid 1px #e6e6e6;bordeR-left:solid 1px #fefefe;}
#container .header .menu .mmid .list ul li a:hover{display:block;text-decoration:none;color:#6d5f5f;}
#container .header .menu .mright{float:left;width:18px;height:117px;background:url('images/menuright.jpg') no-repeat;}
#container .header .menu .mmid .list ul li ul li{float:left;font:normal 12px 'Trebuchet MS',arial;padding:0px;bordeR-right:solid 0px #e6e6e6;bordeR-left:solid 0px #fefefe;}
#container .header .menu .mmid .list ul li ul li a{padding:10px 10px 10px 10px;color:#6d5f5f;}
#container .header .menu .mmid .list ul li ul li a:hover{padding:10px 10px 10px 10px;color:#fff;}
måste vara fel CSS, finns ingen #dropmenu alls... eller det är ul-elementet i .list?
Ursäkta dröjsmålet.
Det var jquery som dropmenu refererade till och det såg jag inte. Men nu har jag fått till min meny så som jag vill ha den på huvudnivå men måste nu fixa den så det funkar med submenu. Så här ser min css ut
#dropdown .menu {float:right; clear: right; margin-top: 24px; border-top:solid 1px #e6e6e6;border-left:solid 1px #e6e6e6;}
#dropdown ul{list-style:none;margin:0px;padding:0px;}
#dropdown ul li{float:left;font:normal 18px 'Trebuchet MS',arial;color:#6d5f5f;padding-left:20px;padding-right:20px;padding-top:10px;padding-bottom:10px;border-right:solid 1px #e6e6e6;border-left:solid 1px #fefefe;}
#dropdown ul li a{display:block;text-decoration:none;color:#6d5f5f;}
#dropdown ul li a:hover{display:block;text-decoration:none;color:#6d5f5f;}
#dropdown ul li ul li{float:left;font:normal 18px 'Trebuchet MS',arial;padding:5px;border-right:solid 0px #e6e6e6;border-left:solid 0px #fefefe;}
#dropdown ul li ul li a{padding:;color:#6d5f5f;}
#dropdown ul li ul li a:hover{padding:;color:#fff;}
Och den genererade koden från wordpress 3 (exempel taget från wordpressguru.se och det genereras likadant hos mig)
<div class="menu">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-1" class="menu-item menu-item-type-post_type">
<a href="http://www.wordpressguru.se/om/">About</a>
<ul class="sub-menu">
<li id="menu-item-2" class="menu-item menu-item-type-post_type">
<a href="http://www.wordpressguru.se/om/och_om_igen/">Om igen</a>
</li>
<li id="menu-item-3" class="menu-item menu-item-type-post_type">
<a href="http://www.wordpressguru.se/om/lank/">Länk igen</a>
</li>
</ul>
</li>
<li id="menu-item-4" class="menu-item menu-item-type-post_type">
<a href="http://www.wordpressguru.se/fraga_gurun">Fråga Gurun</a>
</li>
</ul>
</div>
Och så här har jag implementerat den.
<div id="dropdown">
<?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>
</div>
Jag har löst det nu genom att studera hur det var gjort på wordpressguru.se