css - How to get menu text vertically aligned with inherited height -

-

I have a pretty standard bootstrap nav menu with some custom modifications, with an issue running with NAV both: The hover selector and vertical-alignment property should be one of me: the hover selector fills 100% of the height of the menu bar, but as soon as I do this work, my vertical alignment effect (and vice versa) stops working. How can I meet both requirements? 

   
 (For clarity, see my comment in the CSS code)  
 Thanks  
  
 
  & lt; Div class = " 
  
 container" & gt; & Lt; Nav class = "navbar navbar-inverse" role = "navigation" & gt; & Lt; Div class = "row" & gt; & Lt ;! - Brand and toggle are grouped for better mobile display - & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button type = "button" class = "navbar-toggle short" data-toggle = "collapse" data-target = "# secondary-menu-fall" & gt; & Lt; Span class = "sr-only" & gt; Toggle Navigation & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt ;! - Navigate to Navigation links, forms and other content for toggling - & gt; & Lt; Div id = "secondary-menu-fall" class = "nawabar-fall collapse" & gt; & Lt; Ul class = "nav navbar-nav" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "#" & gt; A & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "" & gt; & Lt; A href = "#" & gt; Do two & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "" & gt; & Lt; A href = "#" & gt; Three three three & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "" & gt; & Lt; A href = "#" & gt; Four to four four & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "" & gt; & Lt; A href = "#" & gt; Five five five five five & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Neo & gt;  
 
 CSS 
 
  # Secondary Menu-Fall. Navbar-nav {display: table; Width: 100%; Height: 100%; } # Secondary Menu-Fall Navbar-nav li {width: 20%; Exhibit: Table Cell; Vertical-row: middle; Align text: left; Float: None; Height: heir; } # Secondary Menu-Fall .navbar-NAV Li A {Height: Heirs; / * Removing it gives the right vertical alignment, but the background hinge does not fill the height of the menu bar. * /} # Secondary Menu-Fall Navbar-nav li a: Hover {background color: green; }    
 
 
 Is it   to  one  selector? 
 
 If you have  li  items on : hover  then it is: 
 
  # Secondary menu-collapse . Navbar-nav li: Hover {background color: green; }  
 
 Then the background color of the full list item (instead of the text inside anchor tag) will be green, then you will see the  height: heirs  property from anchor tag Can remove 
 
 This will beat the background for all hovered items. If you want to have active items black, you can also add: 
 
  # Secondary Menu-Fall. Navbar-nav Active {background-color: # 080808! Important; / * Important! Ensures that its priority is * /}  
 
 
 
 Alternatively, if you have ! Important You do not want to use , or when you hover over an active item, you want a different color, you can use it instead: 
 
  # Secondary -Menu-Fall Navbar-nav Active: Hover {background-color: # BBBBBB; / * Set a hover color for active item here * /}

Comments

Post a Comment

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

-
Image
There are two panels in my JInternalframe. I want to add TopPanel to Jtree to nominate another. But I can not add Jaitari to the top of the panel. Please help me in this piece of code: DefaultMutableTreeNode root = new DefaultMutableTreeNode ("deck"); DefaultMutableTreeNode Item Clubs = New DefaultMutableTreeNode ("Club"); AddAllCard (itemClubs); Root.add (itemClubs); DefaultMutableTreeNode item = New DefaultMutableTreeNode ("Diamonds"); AddAllCard (itemDiamonds); Root.add (itemDiamonds); DefaultMutableTreeNode Itemspads = New DefaultMutableTreeNode ("Spades"); AddAllCard (itemSpades); Root.add (itemSpades); DefaultMutableTreeNode item increases = new DefaultMutableTreeNode ("heart"); AddAllCard (itemHearts); Root.add (itemHearts); Default Trimodel Tree Model = New DefaultTreeModel (Route); Tree = new jetty (tree modal); ScrollPane = new JScrollPane (tree); // scrollPane.setViewportView (tree); . ScrollPane.getViewport () add (tr
Read more

javascript - data.match(var) not working it seems -

-
OK, I have this small block code, which is to scanned a number on the website, but for some reason There is a hip that it is not scanning at all. var regenges = / \ & lt; Span class = "currency-robux" data-to-"item-private-value-price" & gt; ([\ D,]) \ & LT; \ / Span \ & gt; /; Var ValueCiling = Data. Match (reggae); Value-song = number (value slicing location (",", "")); Is there anything wrong with that? This is related to the if statement if (value sling and lieutenant; = price watching) { < P> A function calls to move from there, but for some reason it does not seem to run at all. So I think the Regex is wrong but I'm not sure how. (There is a variable in PriceWinking , this is a snippet from the code.) On the website, I'm trying to remove it. & lt; Span class = "robux" data-plus = "item-privatesale-price" & gt; 115 & lt; / Span & gt; Keep in mind
Read more

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -

-
Before I continue to get a jQuery .each loop to wait for user input There is a problem in repeatedly repeating This is my code (I have commented on what I would like to do): & lt; Html xmlns = "http://www.w3.org/1999/xhtml" & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "common_components.css" /> & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" /> & Lt; Link rel = "stylesheet" href = "slider.css" & gt; & Lt ;? Php include_once 'common_components.php'; $ Query = $ dbh- & gt; Queries ("SELECT movies_dir FROM settings"); $ Line = $ query- & gt; Obtain (PDO :: FETCH_ASSOC); Date_default_timezone_set ('UTC'); Echo "& lt; title & gt; movie scanner & lt; / title & gt;"; ? & Gt; & Lt; Script src = "jquery.min.js" & gt; &am
Read more