webForumDet fria alternativet

Dropdown meny med css strul

5 svar · 673 visningar · startad av harry_boy

harry_boyMedlem sedan feb. 2003193 inlägg
#1

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"?

voigtann1Medlem sedan juni 20019 519 inlägg
#2

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.

harry_boyMedlem sedan feb. 2003193 inlägg
#3

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;}
voigtann1Medlem sedan juni 20019 519 inlägg
#4

måste vara fel CSS, finns ingen #dropmenu alls... eller det är ul-elementet i .list?

harry_boyMedlem sedan feb. 2003193 inlägg
#5

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>
harry_boyMedlem sedan feb. 2003193 inlägg
#6

Jag har löst det nu genom att studera hur det var gjort på wordpressguru.se

128 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
126 ms — hämta tråd, inlägg och bilagor (db)