www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Minor CSS Menu Styling Help Needed

  1. #1
    Join Date
    Oct 2013
    Posts
    9

    resolved [RESOLVED] Minor CSS Menu Styling Help Needed

    Hi Everyone,

    I have some minor CSS styling issues regarding horizontal drop-menus that I hope someone can help me with. The CSS and HTML for this menu was provided by a friend who is now on 3 weeks vacation and I can't wait that long for him to return home! I'm still failry new to HTML and CSS so please bare with me!

    So the test page showing the problem is here

    http://www.eyetrancedesign.co.uk/etd...test_index.php

    The specific problem occurs in a DIV container wraping the menu elements and the HTML for this is

    HTML Code:
    <div class="menu_wrapper">
    
    <div class="menu_container">
    
    
    <nav>
    <ul>
    <li><a href="#nogo" title="">Home</a></li>
    <li><a href="#nogo" title="">Menu 1</a>
    <ul>
    <li><a href="#nogo" title="">Menu 1 Sub-item 1</a></li>
    <li><a href="#nogo" title="">Menu 1 Sub-item 2</a></li>
    <li><a href="#nogo" title="">Menu 1 Sub-item 3</a></li>
    <li><a href="#nogo" title="">Menu 1 Sub-item 4</a></li>
    <li><a href="#nogo" title="">Menu 1 Sub-item 5</a></li>
    </ul>
    </li>
    <li><a href="#nogo" title="">Menu 2</a>
    <ul>
    <li><a href="#nogo" title="">Menu 2 Sub-item 1</a></li>
    <li><a href="#nogo" title="">Menu 2 Sub-item 2</a></li>
    </ul>
    </li>
    <li><a href="#nogo" title="">Menu 3</a></li>
    <li><a href="#nogo" title="">Menu 4</a></li>
    <li><a href="#nogo" title="">Menu 5</a>
    <ul>
    <li><a href="#nogo" title="">Menu 5 Sub-item 1</a></li>
    <li><a href="#nogo" title="">Menu 5 Sub-item 2</a></li>
    <li><a href="#nogo" title="">Menu 5 Sub-item 3</a></li>
    </ul>
    </li>
    <li><a href="#nogo" title="">Menu 6</a></li>
    <li><a href="#nogo" title="">Menu 7</a>
    <ul>
    <li><a href="#nogo" title="">Menu 7 Sub-item 1</a></li>
    <li><a href="#nogo" title="">Menu 7 Sub-item 2</a></li>
    <li><a href="#nogo" title="">Menu 7 Sub-item 3</a></li>
    </ul>
    
    </li>
    
    </ul>
    </nav>
    </div>
    
    </div>

    And the CSS for styling this menu is

    Code:
    .menu_wrapper {
    width: 100%;
    background-color: #eeeeee;
    }
    .menu_container {
    border: 1px dotted #FF0000;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    }
    nav {
    text-align: left;
    margin: 0px;
    font-family: "Century Gothic";
    font-size: 0.9em;
    color: #555555;
    }
    nav ul ul {
    display: none;
    }
    nav ul li:hover > ul {
    display: block;
    }
    
    nav ul {
    list-style: none;
    position: relative;
    display: inline-block; 
    }
    nav ul:after {
    content: ""; 
    clear: both; 
    display: block;
    }
    nav ul li {
    float: left;
    }nav ul li:hover {
    background: #277699;
    }nav ul li:hover a {
    color: #ffffff;
    }
    nav ul li a {
    display: block; 
    padding: 25px 40px;
    color: #277699; 
    text-decoration: none;
    }
    nav ul ul {
    background: #277699; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
    }
    nav ul ul li {
    float: none;
    border-top: 1px solid #eeeeee;
    position: relative;
    border-top-style: dotted;
    }
    nav ul ul li a {
    padding: 25px 25px;
    color: #ffffff;
    }
    nav ul ul li a:hover {
    background: #277699;
    }
    nav ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
    }

    There are a three small problems which I cannot fathom how to resolve.

    1. When you hover over a top menu item such as Home, Menu 1, Menu 2, etc, there is a gap above and below the highlighted menu item which needs to be removed.
    2. The height of the highlighted element in the top menus are too big and I can't work out what to alter/add/delete in the CSS to make the height smaller. The same goes for the height of the highlighted sub menu items.
    3. If you hover over Menu 1, Menu 2 or Menu 5, the Menu Sub-Items display correctly the full length of text but if you hover over Menu 7, the Menu Sub-Items seem to have had a break inserted after the 'Menu 7'

    Can anyone point me in the right direction please?


    Many thanks

  2. #2
    Join Date
    Oct 2013
    Posts
    3
    If I understand you correctly:
    1. Remove border-top: 1px solid #eeeeee; from line 57 of the CSS.
    2. On line 44, you'll see padding: 25px 40px; Change the 25px to a smaller number.
    3. There isn't enough room for the text to expand out in Menu 7, so it wraps to the next line. This is because the sub menu is pressed against the right edge of the ul element's width. You could add a width:100%; after line 24, and it *should* fix it.

  3. #3
    Join Date
    Oct 2013
    Posts
    9
    Than kyou so much for that, I'll give tose suggestions a try.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles