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

    Join Date
    Jan 2014
    Posts
    1
    Rep Power
    0

    How do you make submenu appear on hover?


    hello,

    I have this problem on making a sub-menu in my navigation bar. it seems to be overlapped. how can I prevent this? I can't work out how to make the sub-menu open when you hover on the main word.

    I have use the display:none thingy, but still, it doesn't seems to work.

    Code:
       <div id="nav">
            <ul>
                <li><a href="admin.php">HOME</a></li><br>
                <li><a href="#">USER</a><br>
                    <ul id="submenu"> 
                         <li&gt;<a href="new.php"> Add New ;User</li>
                         <li&gt;<a href="#"> Choose User</li>
                    </ul></li>
         
                <li><a href="#">Pengesah</a></li>;<br>
                <li><a href="#">Penyedia</a></li>;<br>
                <li><a href="#">UPDATE</a></li>&lt;br>
                <li><a href="logout.php">LOGOUT</a><;/li>
            </ul>
        </div>
    this is the css,
    Code:
        div#nav{
            text-align: center;
            list-style: none;
            font-size: 13px;
            margin-bottom: none;
            float: left;
            padding-top: 5px;
        }
         
        div#nav a {
            text-decoration: none;
            color: #000000;
            display: block;
            padding: 7px;
        }
         
        div#nav ul {     
            list-style-type: none;     
            padding-left: 0;     
            margin-left: 10px;
            background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);    
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
            background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");    
            background: -o-linear-gradient(top,#0069d3,007fff);
            background-color:#0069d3;
            width: 140px;
            height: 840px;
            border-left: 2px solid #000000;
            border-right: 2px solid #000000;
            position: relative;
            display: inline-table;
        }
         
        div#nav li {     
            text-decoration: none;       
            display: block;     
        }
         
        div#nav li{         
            display: block;  
            background-color: #ce90dd;
            border: 2px dashed #000000;     
            border-left: 5px solid #000000;  
            border-right: 5px solid #000000;   
            border-bottom: 2px dashed #000000;
            margin: 10px 0 10px 0;
            margin-bottom: none;
            width: 100px;
            float: left;
            padding: 15px;
            height: 30; //tinggi block//
        }
         
        div#nav li a:hover {
            color: #FFFFFF;
            background-color: #35af3b;
        }
         
        #submenu ul ul {
            display: none;
            }
         
        #submenu ul li: hover > ul {
            display: block;
            }
         
        #submenu ul li {
            background:##4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
            }
         
        #submenu ul li:hover a{
            color:#fff;
            }
         
        #submenu ul li a{
            display:block; 
            padding: 25px 40px;
            color:#757575; 
            text-decoration: none;
            }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    I guess the first thing I should point out is that you have some poorly written HTML and CSS lol, which is contributing a lot to your issues.

    I stripped out a lot of the junk, so you could see the bare bones and understand where you went wrong:

    Code:
    <style>
    
    * {
    position: relative;
    margin: 0;
    padding: 0;}
    
    #nav {
    width: auto;
    text-align: center;
    list-style: none;
    font-size: 13px;     
    background-color:#0069d3;}
    
    #nav li {
    font-size: 30px;         
    display: block;  
    margin: 10px 0;
    background-color: #ce90dd;}
    
    #nav li:hover {
    background: red;}
    
    #submenu {
    display: none;}
         
    </style>



    Code:
    <ul id="nav">
        <li><a href="admin.php">HOME</a></li>
        <li><a href="#">USER</a></li>
        <ul id="submenu"> 
          <li><a href="new.php">Add New User</li>
          <li><a href="#">Choose User</li>
        </ul>
        <li><a href="#">Pengesah</a></li>
        <li><a href="#">Penyedia</a></li>
        <li><a href="#">UPDATE</a></li>
        <li><a href="logout.php">LOGOUT</a></li>
    </ul>

    I was having trouble getting :hover selectors to active the submenu, so I would go the Javascript route and use event listeners. Plus, you can animate it slightly so it's not such a cut and dry appear/disappear visual. And if you make the submenu display from none, to block, you will see it's in the appropriate position.

IMN logo majestic logo threadwatch logo seochat tools logo