Prev | Current Page 252 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

Take a very close look at this markup:


  • Item 1

    • Item 1a

    • a realistic amount of vertical
      padding for the link
      the hovered text color
      the hovered background color
      STYLIN??™ WITH CSS - CHAPTER 6 224
    • Item 1b



  • Item 2



I have added a second unordered list inside the ?¬? rst list item, which
is highlighted; this is the drop-down menu. Note exactly where it
is placed??”right before its parent list item closes. Observe how the
closing element of the top-level list item follows the entire secondlevel
list. You have to get this organization right or your menu won??™t
drop down. Let??™s take a look at how this arrangement displays.
FIGURE 6.43 At this point, the only
styling on the drop-down is inherited
from the horizontal top level menu,
so the drop-down??™s list items line up
horizontally, too.
Because we haven??™t written any speci?¬? c styles for the drop-down
yet, the drop-down, simply inherits the styles from the top level and
aligns itself horizontally, as you can see from Figure 6.43. Of course,
in order for it to be a drop-down menu, we need it to stack vertically
instead. The way to do this is to create the absolute/relative
positioning relationship between the two levels of the menu that we
have seen several times by now.


Pages:
240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264