locked
change menu background color and forecolor RRS feed

  • Question

  • User-807418713 posted

    Hello

    This is my code

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
     
    
    <!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 id="Head1" runat="server">
        <title>TANNERY SOFTWARE </title>
        
        <link rel="stylesheet" href="jquery-ui.css" />    
    
    <link rel="stylesheet" href="align.css" />
    <link rel="stylesheet" href="Style/chosen.css" />
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script type="text/javascript" src="Scripts/chosen.jquery.js" ></script>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="chosen.css" /> 
    
    <style type="text/css">
    
     .dropdown-submenu {
        ;
    }
    
     
    .dropdown-submenu>.dropdown-menu {
        top:0;
        left:100%;
        margin-top:-6px;
        margin-left:-1px;
        -webkit-border-radius:0 6px 6px 6px;
        -moz-border-radius:0 6px 6px 6px;
        border-radius:0 6px 6px 6px;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display:block;    
    }
    
    .dropdown-menu 
            {
                
                 color: #00000;
            }
    .dropdown-submenu>a:after {
        display:block;
        content:" ";
        float:right;
        width:0;
        height:0;
        border-color:transparent;
        border-style:solid;
        border-width:5px 0 5px 5px;
        border-left-color:#cccccc;
        margin-top:5px;
        margin-right:-10px;
    }
    .dropdown-submenu:hover>a:after {
        border-left-color:#ffffff;
    }
    .dropdown-submenu.pull-left {
        float:none;
    }
    .dropdown-submenu.pull-left>.dropdown-menu {
        left:-100%;
        margin-left:10px;
        -webkit-border-radius:6px 0 6px 6px;
        -moz-border-radius:6px 0 6px 6px;
        border-radius:6px 0 6px 6px;
    }
     
     
     </style>
        
    <%-- 
     
     --%>
     
    </head>
     
    <body style="padding:0;margin:0;background-;background-repeat:repeat-x"  
    >
        <form id="form1" runat="server">
            &nbsp;<div>
                
            <br />
            <br />
            <br />
            
            
            
            <table>
                <tr>
                
                
                
                 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        
                         <li><a href="Home.aspx">HOME</a></li>
                         
                         
                         
                             
                         
                         
                         
                          
                    
                    
                     
                    
                     
                  
             
                        
                        
                         <li class="dropdown">
                            <a href="Cus_Order.aspx" class="dropdown-toggle" data-toggle="dropdown">MENU<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                               
                               
                                <li><a href="Default1.aspx" target="_blank">ENTRY 1</a></li> 
                                  
                                
                                <li class="dropdown-submenu">
        <a tabindex="-1" href="#">ENTRY 2</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">level 1</a></li>
          
          <li><a href="#">level 2</a></li>
          <li><a href="#">level 3</a></li>
        </ul>
      </li>
                                
                             
                               
                                    
                            </ul>
                        </li>
                        
                        
                        
                        
                        
                        
                            
                   
                      
                        
                        <%-- <li><a href="login.aspx">LOGIN</a></li>--%>
                         
                         
                    </ul>
                </div>
                <!--/.navbar-collapse-->
                </nav>
               
                
               
               
                 
                 
               
                 
                    
                </tr>
                <tr>
                    <td colspan="1" rowspan="1" style="width: 1279px">
                    </td>
                </tr>
            </table>
           
        </div>
        </form>
    </body>
    </html>
    

    It shows like this

    But i want menu background color in black color and text color should be white and mouse over color orange and once i take mouse to menu it should show menu details like mouseover automtically

    thanking you

    Monday, May 17, 2021 4:56 PM

Answers

  • User1535942433 posted

    Hi Gopi.MCA,

    You could do like this:

      .dropdown-menu > li > a:hover,
            .dropdown-menu > li > a:focus {
                background-color: #000000
            }
    
            .dropdown-menu > li > a:hover,
            .dropdown-menu > li > a:focus {
                color: #FFFFFF
            }

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 20, 2021 6:35 AM

All replies

  • User1535942433 posted

    Hi Gopi.MCA,

    According to your description and codes,you have the result of black background and write label. I'm guessing that you need to change the color when the mouse over and automatically show details.Just like this:

    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
        color: #ff6a00;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    Best regards,

    Yijing Sun

    Tuesday, May 18, 2021 6:51 AM
  • User-807418713 posted

    after applying this code

    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
        color: #ff6a00;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    even sub menu are opening directly without mouseover

    Tuesday, May 18, 2021 8:02 AM
  • User1535942433 posted

    Hi Gopi.MCA,

    You could use this:

    .navbar-inverse .navbar-nav > li > a:hover,
            .navbar-inverse .navbar-nav > li > a:focus {
                color: #ff6a00;
            }
            li:hover > ul {
                display: block;
            }

    Best regards,

    Yijing Sun

    Tuesday, May 18, 2021 9:48 AM
  • User-807418713 posted

    thanks

    but one more thing is there how to change white background to black and color white

    thanks

    Tuesday, May 18, 2021 10:14 AM
  • User1535942433 posted

    Hi Gopi.MCA,

    but one more thing is there how to change white background to black and color white

    Do you need the submenu's background black and font white?Just like this:

    Best regards,

    Yijing Sun

    Wednesday, May 19, 2021 3:06 AM
  • User-807418713 posted

    yes like this same

    Wednesday, May 19, 2021 7:51 AM
  • User1535942433 posted

    Hi Gopi.MCA,

    You could do like this:

      .dropdown-menu > li > a:hover,
            .dropdown-menu > li > a:focus {
                background-color: #000000
            }
    
            .dropdown-menu > li > a:hover,
            .dropdown-menu > li > a:focus {
                color: #FFFFFF
            }

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 20, 2021 6:35 AM