www.webdeveloper.com
Results 1 to 2 of 2

Thread: css dropdown menu hover problem with color

  1. #1
    Join Date
    Oct 2012
    Posts
    3

    css dropdown menu hover problem with color

    I just started with html and css and stumpled across a problem i cant solve i got a menu with white text and black background
    one of the menu points is also a dropdown. On hover the dropdown menu appears. It has white background and black text but i didnt found a way to change the
    color of the original menu point from white to black if the dropdown menu is active

    It would be greate help if someone would help me with the problem.

    i know the page looks kind of crapy but its just a try for testing my dropdown menu

    This is the html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>
    <link href="Extendet Dropdown.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="menu" >
    <ul class="menu-item">
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    <li><a href="Try 2.html">First Dropdown</a>
    <ul>
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    <li><a href="Try 2.html">Link to try 2</a>
    </li>
    </ul>
    </li>
    <li>Back in time
    </li>
    <li>NO LINK
    </li>
    </ul>
    </div>
    <div id="textbox">
    </div>
    </body>
    </html>



    This is the css

    html {
    background: -webkit-radial-gradient(white, black);
    height: 1080;
    padding-top: 20px;
    padding-bottom: 20px;


    }

    #menu {
    display: block;
    width: 965px;
    height: 150px;
    border:none; /* border = rand */
    background-color: black;
    margin: auto;
    border-radius: 3px;
    }

    #textbox {
    display: block;
    border:none;
    border-radius: 3px;
    margin: auto;
    width: 960px;
    height: 350px;
    background-color: white;
    margin-top: 20px;
    }

    ul.menu-item a {
    display:block;
    color: white;
    font-family: Verdana;
    font-size: 14px;
    text-decoration: none;
    }

    ul.menu-item ul li a { /* die links des drop downs sind schwarz statt weis wie im die links im menu-item */
    display:block;
    color: black;
    font-family: Verdana;
    font-size: 14px;
    text-decoration: none;
    }

    ul.menu-item {
    list-style: none;
    padding: 0;
    display:block;
    color: black;
    font-family: Verdana;
    font-size: 14px;
    text-decoration: none;

    }

    /*ul.menu-item { position: relative; z-index: 597; float: left; } keine sichtbare Funktion*/

    ul.menu-item li {
    float: left;
    line-height: 24px;
    vertical-align: middle; zoom: 1;
    width: 231px;
    height: 24px;
    margin: 119px 0px 0px 7px;
    text-align: center;
    background-color:black;
    color: white;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    border-radius:3px;
    border: 1px solid;
    border-color: black;
    }

    ul.menu-item li:hover { /*hover funktion für die boxen ganz oben*/
    position: relative;
    cursor: default;
    background-color: white;
    color: #FF6C00;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 1px solid;
    border-color: #FF6C00;
    -webkit-transition: color 0.5s ease;
    }

    ul.menu-item li:hover > li a{
    color: black;
    }

    ul.menu-item ul { /*einstellung für das dropdown kästchen*/
    visibility: hidden;
    position: relative;
    top: 100%;
    left: 0;
    width: 191px;
    z-index: 580;
    margin: -25px 0px 0px -1px;
    background-color: white;
    list-style: none;
    border-bottom-left-radius:3px;
    border-bottom-right-radius: 3px;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: none;

    }

    ul.menu-item ul li { /*einstellung für die Liste des Dropddownkästchens */
    float: none;
    background: white;
    text-align: center;
    line-height: 24px;
    width: 150px;
    height: 24px;
    margin: 0px 0px 0px 0px;
    border: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: 1px solid;
    border-color: black;

    }


    ul.menu-item ul li:hover{ /* notwendig, da sonst die unter Kante der Dropdown liste beim hover auch abflacht */
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    border-top: 1px solid;
    border-color: black;
    }

    ul.menu-item li:hover > ul {
    visibility: visible;
    border-color: #FF6C00;
    color: black;
    }

    ul.menu-item a:hover {
    color: #FF6C00; /* color */
    text-decoration: none; /* eliminates underline */
    -webkit-transition: color 0.5s ease;
    }


    Thank you for trying to help

  2. #2
    Join Date
    Oct 2012
    Posts
    78

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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