question

RAVI-6930 avatar image
0 Votes"
RAVI-6930 asked YijingSun-MSFT answered

Increase Menu Size Height Of My Code

Hello

This is my aspx code

  <style type="text/css">
    
  .dropdown-submenu {
     position:relative;
        
 }
    
     
 .navbar-inverse .navbar-nav > li > a:hover,
         .navbar-inverse .navbar-nav > li > a:focus {
             color: #ff6a00;
                
         }
         li:hover > ul {
             display: block;
         }
     
 .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;
     transition-delay:20000s;
        
        
 }
 .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;
        
 }
    
 .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;
                
         }
     
     
  </style>

I Want menu like this shown in image as below how to increase this menu height size

104334-untitled.png

Thanking you


dotnet-aspnet-general
untitled.png (11.2 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @RAVI-6930 ,
I don't understand your requirement clearly. Do you need increase each item's height or increase the height when hovering the submenu with black background?
Best regards,
Yijing Sun

0 Votes 0 ·

Hello

increase item height and hover height, sub menu height

Thanking You

0 Votes 0 ·
RAVI-6930 avatar image
0 Votes"
RAVI-6930 answered RAVI-6930 edited

Here Is My aspx page code

<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 style="color:White;font-size:larger;" href="Home.aspx">HOME</a></li>
<li class="dropdown">
<a style="color:White;font-size:larger;" href="Cus_Order.aspx" class="dropdown-toggle" data-toggle="dropdown">STOCKS<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="A.aspx" target="_blank">ITEM 1 PURCHASE</a>
<ul class="dropdown-menu">
<li><a href="A.aspx">ARRIVAL ENTRY</a></li>
<li><a href="B.aspx">INVOICE ENTRY</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="A.aspx" target="_blank">ITEM 2 PURCHASE</a>
<ul class="dropdown-menu">
<li><a href="A.aspx">ARRIVAL ENTRY</a></li>
<li><a href="B.aspx">INVOICE ENTRY</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="A.aspx" target="_blank">ITEM 3 PURCHASE</a>
<ul class="dropdown-menu">
<li><a href="A.aspx">ARRIVAL ENTRY</a></li>
<li><a href="B.aspx">INVOICE ENTRY</a></li>
</ul>
</li>
</ul>
</div>
</nav>

Thanks

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered

Hi @RAVI-6930 ,
As far as I think,you could add height of submenu and dropdown-menu.Just like this:

 .dropdown-submenu {
          position: relative;
          height: 40px;
          font-size: medium;
   }

  .dropdown-submenu > .dropdown-menu > li {
                 height: 40px;
             }

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

105196-new-text-document-3.txt
Best regards,
Yijing Sun


If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.