#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0

    Having Some Drop Down Menu trouble


    I have run into some trouble with IE not displaying my nested drop down lists on ":hover" using pure CSS. A few other threads have mentioned IE not being able to identify any hover action other than "a:hover"

    Anyone have a straightforward solution?

    here's my html:

    -------------------------------------------

    <link href="menu_css.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="menulist">
    <ul>
    <li>
    <a class="menuitem_home" href=""></a>
    </li>
    <li>
    <a class="menuitem_apparel" href=""></a>
    <ul>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    </ul>
    </li>
    <li>
    <a class="menuitem_business" href=""></a>
    <ul>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    </ul>
    </li>
    <li>
    <a class="menuitem_leisure" href=""></a>
    <ul>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    </ul>
    </li>
    <li>
    <a class="menuitem_tradeshow" href=""></a>
    <ul>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    <li>
    <a class="submenulink" href="">link</a> </li>
    </ul>
    </li>
    <img src="images/menu-divider.png" width="185" height="33" /><a class="helpbutton" href=""></a>
    </ul>
    </div>
    </body>
    </html>

    and the CSS:
    -------------------------------------------------

    @charset "utf-8";
    /* CSS Document */

    #menulist {
    width: 185px;
    float: left;
    background-image: none;
    background-color: #FFF;
    }
    .menuitem_home {
    border: none;
    background-image: url(images/homebutton.png);
    height: 33px;
    width: 185px;
    float: left;
    padding-top: 10px;
    background-repeat: no-repeat;
    }
    .menuitem_home:hover {
    background-image: url(images/homebutton_hover.png);
    }
    .menuitem_apparel {
    border: none;
    background-image: url(images/apparelbutton.png);
    height: 33px;
    width: 185px;
    float: left;
    padding-top: 10px;
    background-repeat: no-repeat;
    }
    .menuitem_apparel:hover {
    background-image: url(images/apparelbutton_hover.png);

    }
    .menuitem_business {
    border: none;
    background-image: url(images/businessbutton.png);
    height: 33px;
    width: 185px;
    float: left;
    padding-top: 10px;
    background-repeat: no-repeat;
    }
    .menuitem_business:hover {
    background-image: url(images/businessbutton_hover.png);
    }
    .menuitem_leisure {
    border: none;
    background-image: url(images/leisurebutton.png);
    height: 33px;
    width: 185px;
    float: left;
    padding-top: 10px;
    background-repeat: no-repeat;
    }
    .menuitem_leisure:hover {
    background-image: url(images/leisurebutton_hover.png);
    }
    .menuitem_tradeshow {
    border: none;
    background-image: url(images/tradeshowbutton.png);
    height: 33px;
    width: 185px;
    float: left;
    padding-top: 10px;
    background-repeat: no-repeat;
    }
    .menuitem_tradeshow:hover {
    background-image: url(images/tradeshowbutton_hover.png);
    }

    ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
    ul ul {
    float: left;
    display: none;
    }

    ul li:hover > ul {
    display: block;
    }

    .submenulink {
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-size: 12px;
    color: #69F;
    float: left;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    }
    .submenulink:hover {
    color: #CCC;
    }
    .helpbutton{
    background-image: url(images/needhelp.png);
    height: 180px;
    width: 180px;
    float: left;

    }
    .helpbutton:hover{
    background-image: url(images/needhelp_hover.png);
    height: 180px;
    width: 180px;
    float: left;
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    14
    Rep Power
    0
    I could't get it to display on Firefox for some reason If you like, try some different code.

    HTML:
    Code:
    <div id="nav">
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Find Us</a>
    		<ul>
    			<li><a href="#">Contact Us</a></li>
    			<li><a href="#">Our Location</a></li>
    			<li><a href="#">Facebook <span class="right-arrow">►</span></a>
    				<ul>
    					<li><a href="#">Like Us</a></li>
    					<li><a href="#">Favorite Us</a></li>
    				</ul></li>
    			<li><a href="#">Twitter <span class="right-arrow">►</span></a>
    				<ul>
    					<li><a href="#">Follow Us</a></li>
    					<li><a href="#">Tweet About Us</a></li>
    				</ul></li>
    			<li><a href="#">YouTube <span class="right-arrow">►</span></a>
    				<ul>
    					<li><a href="#">Subscribe</a></li>
    					<li><a href="#">Watch Our Videos</a></li>
    				</ul></li>
    			<li><a href="#">Google+</a></li>
    		</ul>
    	</li>
    </ul>
    
    <br class="clearboth"/>
    
    </div>
    CSS:
    Code:
    .clearboth {
        margin: 0;
        padding: 0;
        clear: both;
    }
     
    #nav {
        font-family: verdana;
        font-weight: bold;
        font-size: 9pt;
    }
     
    #nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
     
    #nav a:link,
    #nav a:visited {
        color: #ffffff;
        text-decoration: none;
    }
     
    #nav a {
        display: block;
        padding: 6px 8px;
    }
     
    #nav li {
        float: left;
        background-color: #000000;
        margin-right: 1px;
        position: relative;
    }
    
    #nav li li{
        width: 160px;
        margin-top: 1px;
    }
    
    #nav li:hover {
    	background-color: #555555;
    }
    #nav li li:hover {
    	background-color: #757575;
    }	
    
     
    #nav ul ul  {
        position: absolute;
    	visibility: hidden;
    }
     
    #nav ul ul ul{
        position: absolute;
        left: 100%;
    	top: -2px;
        border: solid 1px transparent;
    }  
    
    #nav li:hover > ul {
    	visibility: visible;
    }
     
    .right-arrow {
        float: right;
    }
    This works for IE8+ and for other browsers also

    DEMO: http://jsfiddle.net/leev18/e2M6S/embedded/result/

IMN logo majestic logo threadwatch logo seochat tools logo